<!--权限控制页面-->
<template>
	<div class="app-container">
		<div class="content">
			<!--搜索框-->
			<div class="formSearch">
				<div class="formSearchDiv searchtxtdiv"><el-input class="searchtxtinput" v-model='searchTxt' type='text' placeholder='请输入手机号/姓名/身份证号' size='mini'></el-input></div>
				<div class="formSearchDiv">
					<el-button type='primary' size='mini' @click='search'>搜索</el-button>
				</div>
				<el-button class='floatright' type='primary' size='mini' @click='search'>新增管理员</el-button>
			</div>
			
			<!--table-->
			<template>
			  <el-table :data="userList" style="width: 100%"  :stripe='true' 
					@expand-change='toggleRowExpansion' v-loading='loading'
					:row-key="getRowKeys" :expand-row-keys="expands">
				<el-table-column label="姓名" prop="name">
			    </el-table-column>
			    <el-table-column label="手机号" prop="phoneNumber" width='200px'>
			    </el-table-column>			    
			    <el-table-column label="身份证号" width='220px'>
			    	<template slot-scope="scope">
			    		{{scope.row.identityCard | hideMiddle}}
			    	</template>
			    </el-table-column>
			    <el-table-column label="备注" prop="remarlk">
			    	
			    </el-table-column>
			    <el-table-column label="状态" prop="isActive" width='100px'>
			    	<template slot-scope='scope'>
			    		<!--<el-tooltip content="启用" placement="bottom" v-if='scope.row.isActive==true'>
						  <el-switch
						  	name="isActive"
						    value="true"
						    active-color="#13ce66"
						    inactive-color="#cccccc"
						    active-value="true"
						    inactive-value="false">
						  </el-switch>
						</el-tooltip>-->
						<el-tooltip content="禁用" placement="bottom">
						  <el-switch
						  	name="isActive"
						    v-model="scope.row.isActive"
						    active-color="#13ce66"
						    inactive-color="#cccccc"
						  </el-switch>
						</el-tooltip>
			    	</template>
			    </el-table-column>
			    <el-table-column label="操作" width='100px'>
			    	<template slot-scope="scope">
			    		<a class="deletea">删除</a>
			    	</template>
			    </el-table-column>
			  </el-table>
			  <!--el循环列表数据end-->
              <div v-if="userList.length!=0" class='page-right'>
                <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>

              </div>
			</template>
			
			
			<!--新增管理员弹框-->
			<el-dialog title="新增管理员" :visible.sync="dialogFormVisible" class='addadminDia'>
			  <el-form :model="form">
			  	<el-form-item label="搜索：" :label-width="formLabelWidth">
			  		<div class="searchintwp">
			  			<el-input class='searchint' type='text' size='mini' placeholder='请输入手机号/身份证号'></el-input>
			  			<el-button class='searchbtn' type='primary' size='mini'>搜索</el-button>
			  		</div>
			  	</el-form-item>
			   	<el-form-item label="手机号：" :label-width="formLabelWidth">
			  		<div class="searchintwp">
			  			<el-input class='searchint' type='text' size='mini' placeholder='请输入手机号'></el-input>
			  		</div>
			  	</el-form-item>
			  	<el-form-item label="姓名：" :label-width="formLabelWidth">
			  		<div class="searchintwp">
			  			<el-input class='searchint' type='text' size='mini' placeholder='请输入姓名'></el-input>
			  		</div>
			  	</el-form-item>
			  	<el-form-item label="身份证号：" :label-width="formLabelWidth">
			  		<div class="searchintwp">
			  			<el-input class='searchint' type='text' size='mini' placeholder='请输入身份证号'></el-input>
			  		</div>
			  	</el-form-item>
			  	<el-form-item label="状态：" :label-width="formLabelWidth">
			  		<div class="searchintwp">
			  			<el-tooltip content="" placement="bottom">
						  <el-switch
						    value=""
						    active-color="#13ce66"
						    inactive-color="#cccccc"
						    active-value=true
						    inactive-value=false>
						  </el-switch>
						</el-tooltip>
			  		</div>
			  	</el-form-item>
			  	<el-form-item label="备注：" :label-width="formLabelWidth">
			  		<div class="searchintwp">
			  			<el-input class='searchint' type='text' size='mini' placeholder='请输入公司名称'></el-input>
			  		</div>
			  	</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			  </div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
export default{
	data(){
		return{
			loading:false,
			loading2:false,
			data:{},
			vaule:'',
			searchTxt:'',
			userList:[],
			currentPage:1,
			isActive:'true',
			dialogFormVisible:false,
			formLabelWidth:'80px',
			page:1,
			
		}
	},
	mounted(){
		if(this.$route.query.page){
			this.page = this.$route.query.page
		}
		if(this.$route.query.key){
			this.searchTxt = this.$route.query.searchTxt
		}		
		this.getuserList(this.page,this.searchTxt);
		//window.location.reload()
		console.log('55555')
		console.log(this.$route.query)
	},
	filters: {
        hideMiddle(val) {
            if(val && val!=''){
            	return `${val.substring(0,3)}***********${val.substring(val.length-4)}`;
            }
        }
    },
    watch: {
	    '$route' (to, from) {
	        this.$router.go(0);
	    }
	},
	methods:{
		//获取用户列表
		getuserList(page,key){
			//window.location.reload()
			this.loading = true;			
		  	let params = {
	  			pageIndex:page,
	        	keyWord:key
	  		}
	      	this.post(params, "services/app/applets/GetAdminList").then(response => {
	      		this.loading = false;
		        if (response.success) {
		        	console.log(response.result.items)
		            this.userList = response.result.items;
		            this.pagetotal = response.result.totalCount;
		            this.currentPage= page
		        }
		    });
	    },
	    getStatus (urlStr) {
	      var urlStrArr = urlStr.split('/')
	      return urlStrArr[urlStrArr.length - 1]
	    },
	    handleCurrentChange(val) {
	      	//this.getuserList(val);
	      	this.$router.push({
				name:'payaccs',
				query:{
					page:val,
					key:this.searchTxt
				}
			})
	      	
	    },
	    //搜索
	    search(){
	    	this.getuserList()
	    },
	    
			
	}
}
</script>

<style lang="scss" scoped>
.content{
	padding: 20px;
	.formSearch{
		/*width: 450px;*/height:50px;/*padding-top:20px;*/
		.formSearchDiv{
			display: inline-block;
		}
		.searchtxtdiv{
			width: 200px;margin-right:10px;
			.searchtxtinput{font-size: 13px;}
		}
	}
	.page-right{
        text-align: right;
        margin-top: 52px;
    }
    .searchintwp{
    	.searchint{width: 200px;margin-right: 15px;}
    	.searchbtn{}
    }
}
.floatright{float: right;}
.deletea{color: rgb(2, 125, 202);}
</style>
<style type="text/css">
	.addadminDia .el-dialog{width: 450px !important;}
	.addadminDia .el-dialog__title{font-size: 14px;}
	.addadminDia .el-dialog__body{padding: 15px 20px;}
	.addadminDia .el-dialog__header{border-bottom: 1px solid #EEEEEE;}
	.addadminDia .el-form-item__label{text-align: right;}
</style>